<template>
  <div class="uploadfb">
    <div class="ufb-title">
      <van-nav-bar :title="title" left-arrow   @click-left="goback">
        <template #right>
          <van-button @click="fabu" color="#e65563" size="mini">发布</van-button>
        </template>
      </van-nav-bar>
    </div>
    <div class="ufb-body">
      <div v-if="yp" class="body-yq-box">
        <div class="box-tit">
          <i class="iconfont icon-icon-test"></i>
          <span>约拍要求</span>
        </div>
        <div class="box-input">
          <textarea v-model="ypfb.aprequirement" cols="30" rows="10" placeholder="请描述一下您的约拍要求...(照片不能有违规图片，否则审核不通过)"></textarea>
        </div>
      </div>
      <div v-if="zp" class="body-yq-box">
        <div class="box-tit">
          <i class="iconfont icon-icon-test"></i>
          <span>作品名称/描述</span>
        </div>
        <div class="box-input">
          <textarea v-model="zpfb.themetext" cols="30" rows="10" placeholder="请输入作品名称/描述...(照片不能有违规图片，否则审核不通过)"></textarea>
        </div>
      </div>
      <div v-if="cd" class="body-yq-box">
        <div class="box-tit">
          <i class="iconfont icon-chengshi"></i>
          <span>场地名称</span>
        </div>
        <div class="box-input">
          <input v-model="cdfb.fieldname" type="text" placeholder="请输入场地名称~">
        </div>
      </div>
      <div v-if="cd" class="body-yq-box">
        <div class="box-tit">
          <i class="iconfont icon-icon-test"></i>
          <span>场地介绍</span>
        </div>
        <div class="box-input">
          <textarea v-model="cdfb.introduce" cols="30" rows="10" placeholder="请输入场地介绍~"></textarea>
        </div>
      </div>
      <div v-if="jc" class="body-yq-box">
        <div class="box-tit">
          <i class="iconfont icon-zhuti"></i>
          <span>教程主题</span>
        </div>
        <div class="box-input">
          <input v-model="jcfb.tttheme" type="text" placeholder="请输入教程主题~">
        </div>
      </div>
      <div v-if="jc" class="body-yq-box">
        <div class="box-tit">
          <i class="iconfont icon-icon-test"></i>
          <span>教程内容</span>
        </div>
        <div class="box-input">
          <textarea v-model="jcfb.tocontent" cols="30" rows="10" placeholder="请输入教程内容~"></textarea>
        </div>
      </div>
      <div class="body-sc-box">
        <div class="box-tit">
          <i class="iconfont icon-tupian"></i>
          <span>上传照片</span>
          <span>本人作品/本人照片/期待的风格</span>
        </div>
        <div class="box-upload">
          <van-uploader v-model="fileList" multiple />
        </div>
      </div>
      <div v-if="yp" class="body-sj-box">
        <div class="box-tit" @click="showPicker = true">
          <div class="box-le">
            <i class="iconfont icon-riqiqishu"></i>
            <span>时间</span>
            <input readonly type="text"  :value="time" placeholder="您期望的时间">
          </div>
          <div class="box-rg">
            <i class="iconfont icon-arrow-left"></i>
          </div>
        </div>
        <van-popup v-model="showPicker" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </div>
      <div v-if="cd" class="body-lx-box">
        <div class="box-tit" @click="typePicker = true">
          <div class="box-le">
            <i class="iconfont icon-leixing"></i>
            <span>所属类型</span>
            <input readonly type="text"  :value="type" placeholder="请选择所属类型">
          </div>
          <div class="box-rg">
            <i class="iconfont icon-arrow-left"></i>
          </div>
        </div>
        <van-popup v-model="typePicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="fieldtype"
            @confirm="typefirm"
            title="选择类型"
            @cancel="typePicker = false"
          />
        </van-popup>
      </div>
      <div v-if="cd" class="body-dd-box">
        <div class="box-tit" @click="addressPicker = true">
          <div class="box-le">
            <i class="iconfont icon-chengshi1"></i>
            <span>地区</span>
            <input readonly type="text"  :value="address" placeholder="请选择所在地区">
          </div>
          <div class="box-rg">
            <i class="iconfont icon-arrow-left"></i>
          </div>
        </div>
        <van-popup v-model="addressPicker" position="bottom">
          <van-area
            :area-list="areaList"
            title="选择所在地区"
            @confirm="addressfirm"
            @cancel="addressPicker = false"
          />
        </van-popup>
      </div>
      <div v-show="cd" class="map-area" :id="mapId"></div>
      <div v-if="yp" class="body-dd-box">
        <div class="box-tit" @click="addressPicker = true">
          <div class="box-le">
            <i class="iconfont icon-chengshi1"></i>
            <span>城市</span>
            <input readonly type="text"  :value="address" placeholder="您期望的拍摄城市">
          </div>
          <div class="box-rg">
            <i class="iconfont icon-arrow-left"></i>
          </div>
        </div>
        <van-popup v-model="addressPicker" position="bottom">
          <van-area
            :area-list="areaList"
            title="选择城市"
            @confirm="addressfirm"
            @cancel="addressPicker = false"
          />
        </van-popup>
      </div>
      <div v-if="yp" class="body-lx-box">
        <div class="box-tit" @click="typePicker = true">
          <div class="box-le">
            <i class="iconfont icon-wode1"></i>
            <span>约拍对象</span>
            <input readonly type="text"  :value="type" placeholder="您期望的对象">
          </div>
          <div class="box-rg">
            <i class="iconfont icon-arrow-left"></i>
          </div>
        </div>
        <van-popup v-model="typePicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="typefirm"
            title="选择约拍对象"
            @cancel="typePicker = false"
          />
        </van-popup>
      </div>
      <div v-if="yp || zp || cd" class="body-zt-box">
        <div class="box-tit">
          <i class="iconfont icon-zhuti"></i>
          <span>{{ fbzt }}</span>
        </div>
        <div class="box-check">
          <van-checkbox-group v-model="result" direction="horizontal" :max="3">
            <van-checkbox  v-for="(item,index) of zhuti" :name="item" :key="index">
              <div class="checkitems" @click="check(item,$event)" >{{ item }}</div>
            </van-checkbox>
          </van-checkbox-group>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import areaList from '@/Photography/assets/js/area';
import {Dialog, Toast} from 'vant';
export default {
  name: "uploadfb",
  data(){
    return{
      title: '',
      fbzt: '',
      yp: false,
      zp: false,
      cd: false,
      jc: false,
      fileList: [],
      showPicker: false,
      addressPicker: false,
      typePicker: false,
      time: '',
      address: '',
      type: '',
      currentDate: new Date(),
      minDate: new Date(),
      areaList,
      columns: ['模特', '摄影师'],
      fieldtype: ['景点', '影棚', '街道', '校园', '公园', '郊外', '图书馆', '咖啡厅', '游乐场', '商城', '酒店', '工厂', '其他'],
      result: [],
      zhuti: ['时尚','情侣','商务','汉服','儿童摄影','校园','古风','淘宝','婚礼','清新','夜景','日系','复古','欧美','时尚','时尚'],
      zpfb: {},
      ypfb: {},
      cdfb: {},
      jcfb: {},
      url: '',
      photourl: [],
      data:{},
      mapId: 'BMap-' + parseInt(Date.now() + Math.random()),
      map: null,
    }
  },
  created() {
    const { release } = this.$route.params;
    if(release == "yp"){
      this.yp = true;
      this.title = "发布约拍";
      this.fbzt = "主题标签";
    }
    if(release == "zp"){
      this.zp = true;
      this.title = "发布作品";
      this.fbzt = "主题标签";
    }
    if(release == "cd"){
      this.cd = true;
      this.title = "发布场地";
      this.fbzt = "适合拍摄主题";
    }
    if(release == "jc"){
      this.jc = true;
      this.title = "发布教程";
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      // 百度地图API功能
      this.map = new BMap.Map(this.mapId) // 创建Map实例
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
      this.map.addEventListener("click", (e) => {
        console.info(e)
        var marker = new BMap.Marker(e.point);
        this.map.addOverlay(marker);
      });
    },
    async fabu(){
      console.info(this.fileList)
      let params = new FormData()
      this.fileList.forEach(r=>{
        params.append("files", r.file)
      })
      console.info(params)
      try {
        const res = await this.$axios.post('/blog/picupload',params,{
          'Content-Type':'multipart/form-data'
        })
        const {success, data} = res.data
        if (success){
          this.photourl = data.map(r=>{
            return r = r + '?x-oss-process=style/phonelook'
          })
          if(this.zp){
            this.url = '/blog/releasecreat';
            this.data = {
              uid: parseInt(localStorage.getItem("uid")),
              themetext: this.zpfb.themetext,
              pictureurl: this.photourl.toString(),
              theme: this.result.toString()
            }
          }
          if(this.yp){
            this.url = '/blog/appointcreate';
            this.data = {
              uid: parseInt(localStorage.getItem("uid")),
              aprequirement: this.ypfb.aprequirement,
              apTime: new Date(this.time).getTime(),
              apAdress: this.address,
              apType: this.type,
              pictureurl: this.photourl.toString(),
              aptheme: this.result.toString()
            }
          }
          if(this.cd){
            this.url = '/blog/fieldcreate';
            this.data = {
              uid: parseInt(localStorage.getItem("uid")),
              fieldname: this.cdfb.fieldname,
              introduce: this.cdfb.introduce,
              fieldAdress: this.address,
              fieldType: this.type,
              pictureurl: this.photourl.toString(),
              suitable: this.result.toString()
            }
          }
          if(this.jc){
            this.url = '/blog/tutorialcreate';
            this.data = {
              uid: parseInt(localStorage.getItem("uid")),
              tttheme: this.jcfb.tttheme,
              tocontent: this.jcfb.tocontent,
              pictureurl: this.photourl.toString(),
            }
          }
          try {
            const res = await this.$axios({
              url: this.url,
              method:"post",
              data:this.data,
            })
            const {success, msg} = res.data
            if (success){
              Toast.success('发布成功')
              this.$router.replace('/index')
            }else {
              Toast.fail(msg)
            }
          }catch (e) {
            Toast.fail(e)
          }
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    goback(){
      Dialog.confirm({
        title: '温馨提示',
        message: '确定要放弃发布吗?',
      })
        .then(() => {
         this.$router.go(-1);
        })
        .catch(() => {
          // on cancel
        });
    },
    onConfirm(value) {
      const year = new Date(value).getFullYear();
      const mouth = new Date(value).getMonth()+1;
      const day = `${new Date(value).getDate()}`.padStart(2, 0)
      this.time = `${year}-${mouth}-${day}`;
      this.showPicker = false;
    },
    addressfirm(values){
      this.address =values[1].name;
      this.addressPicker = false;
      this.map.centerAndZoom(this.address,11);
    },
    typefirm(value){
      this.type =value;
      this.typePicker = false;
    },
    check(item,event){
      console.info(event.target)
      event.target.classList.toggle("table-check")
      var length = document.getElementsByClassName("table-check").length
      console.info(length)
      if(length>3){
        event.target.classList.toggle("table-check")
        Dialog.alert({
          title: '温馨提示',
          message: '你最多只能选择3个标签哦~',
        }).then(() => {
          // on close
        });
      }
    }
  },
  watch:{
    result(){
      console.info(this.result)
    }
  }
}
</script>

<style scoped lang="scss">
.uploadfb{
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  .ufb-title{
    ::v-deep .van-button--mini{
      padding: vw(24) vw(26);
    }
  }
  .ufb-body{
    flex: 1;
    overflow-y: auto;
    .map-area {
      height: vw(300);
      margin: vw(10) vw(20);
      background-color: #ffffff;
      ::v-deep .BMap_cpyCtrl{
        display: none;
      }
      ::v-deep .anchorBL{
        display: none;
      }
    }
    .body-yq-box{
      margin-top: vw(10);
      padding: vw(10) vw(20);
      background-color: #ffffff;
      .box-tit{
        height: vw(80);
        display: flex;
        align-items: center;
        font-size: vw(30);
        color: #333333;
        border-bottom: 1px solid #f6f6f6;
        i{
          font-size: vw(40);
          color: #ee818e;
          padding-right: vw(20);
        }
      }
      .box-input{
        padding-top: vw(20);
        input{
          outline: none;
          border: 0;
          width: 100%;
          padding: 0;
          resize: none;
        }
        textarea{
          outline: none;
          border: 0;
          width: 100%;
          height: vw(220);
          padding: 0;
          resize: none;
        }
      }
    }
    .body-sc-box{
      margin-top: vw(10);
      padding: vw(10) vw(20);
      background-color: #ffffff;
      .box-tit{
        height: vw(80);
        display: flex;
        align-items: center;
        font-size: vw(30);
        color: #333333;
        i{
          font-size: vw(40);
          color: #ee818e;
          padding-right: vw(20);
        }
        span{
          &:last-child{
            padding-left: vw(30);
            color: #9d9d9d;
          }
        }
      }
    }
    .body-sj-box{
      margin-top: vw(10);
      padding: 0 vw(20);
      background-color: #ffffff;
      .box-tit{
        height: vw(80);
        display: flex;
        align-items: center;
        font-size: vw(30);
        color: #333333;
        .box-le{
          i{
            font-size: vw(30);
            color: #ee818e;
            padding-right: vw(20);
          }
          input{
            color: #9d9d9d;
            border: 0;
            padding-left: vw(30);
          }
        }
        .box-rg{
          flex: 1;
          text-align: end;
          font-size: vw(30);
          color: #ee818e;
          padding-right: vw(20);
        }
      }
    }
    .body-dd-box{
      padding: 0 vw(20);
      background-color: #ffffff;
      .box-tit{
        height: vw(80);
        display: flex;
        align-items: center;
        font-size: vw(30);
        color: #333333;
        .box-le{
          i{
            font-size: vw(30);
            color: #ee818e;
            padding-right: vw(20);
          }
          input{
            color: #9d9d9d;
            border: 0;
            padding-left: vw(30);
          }
        }
        .box-rg{
          flex: 1;
          text-align: end;
          font-size: vw(30);
          color: #ee818e;
          padding-right: vw(20);
        }
      }
    }
    .body-lx-box{
      padding: 0 vw(20);
      background-color: #ffffff;
      .box-tit{
        height: vw(80);
        display: flex;
        align-items: center;
        font-size: vw(30);
        color: #333333;
        .box-le{
          i{
            font-size: vw(30);
            color: #ee818e;
            padding-right: vw(20);
          }
          input{
            color: #9d9d9d;
            border: 0;
            padding-left: vw(30);
          }
        }
        .box-rg{
          flex: 1;
          text-align: end;
          font-size: vw(30);
          color: #ee818e;
          padding-right: vw(20);
        }
      }
    }
    .body-zt-box{
      margin-top: vw(10);
      padding: vw(10) vw(20);
      background-color: #ffffff;
      .box-tit{
        height: vw(80);
        display: flex;
        align-items: center;
        font-size: vw(30);
        color: #333333;
        i{
          font-size: vw(30);
          color: #ee818e;
          padding-right: vw(20);
        }
      }
      .box-check{
        ::v-deep .van-checkbox-group--horizontal{
          .van-checkbox{
            margin-bottom: vw(12);
          }
          .van-checkbox__label{
            margin-left: 0;
          }
        }
        ::v-deep .van-checkbox__icon{
          width: 0;
          height: 0;
          .van-icon{
            display: none;
          }
        }
        ::v-deep .checkitems{
          font-size: vw(20);
          border: 1px solid #d5d5d5;
          padding: 0 vw(30);
          border-radius: vw(100);
          color: #d5d5d5;
        }
        ::v-deep .table-check{
          color: white;
          border-color: #ee818e;
          background-color: #ee818e;
        }

      }
    }
  }
}
</style>
